<template>
<a-drawer :visible="dataVisible" width="70%" title="#添加派送单" class="gt-drawer send-order-info" @cancel="dataVisible = false"
        :footer="false"
        unmount-on-close>
        <div>
          <a-card title="订单信息">
            <ma-info :columns="infoColumns"  :column="4" :data="record" layout="horizontal" size="small"/>
          </a-card>
          <a-card title="">
              <a-table :columns="columns" :data="parcelList" />
          </a-card>
        </div>
</a-drawer>
  </template>
  
  <script setup>
  import {computed, inject, provide, ref, watch,reactive} from "vue";
  import draggable from "vuedraggable";
  import MaInfo from "@/components/ma-info/index.vue"
  import parcel from "@/api/document/parcel"
  import {Message} from "@arco-design/web-vue";
  import dictHelp from "@/utils/dicthelp.js";
  const dataVisible = ref(false)
  const record = ref({})
  const parcelList = ref([])
  const list1 = ref([]);
  const list2 = ref([]);
  const list3 = ref([]);

const getParcels = async (shipment_id) =>{
  let res = await parcel.getAllList({shipment_id:shipment_id,send_order_id:record.value.id})
  parcelList.value = res.data
}

const onShow = async (rec,shipment_id) => {
      record.value = rec
      dataVisible.value = true
      await getParcels(shipment_id)
  }   
  const infoColumns = reactive([
    { title: '运单号', dataIndex: 'shipment.shipment_no'},
    { title: '外部订单号', dataIndex: 'order_id'},
    { title: '服务类型', dataIndex: 'service_type'},
    { title: '主单号', dataIndex: 'tracking_no'},
    { title: '货箱数量', dataIndex: 'parcel_count'},
    { title: '创建者', dataIndex: 'created_by',formType: "select",
      dict:dictHelp.user
    },
    { title: '创建时间', dataIndex: 'created_at'},
    { title: '备注', dataIndex: 'remark'},
  ])
  const columns = reactive([
    {'title':'货箱号','dataIndex':'number'},
    {'title':'承运商代码','dataIndex':'outer_carrier_code'},
    {'title':'快递单号','dataIndex':'outer_carrier_tracking_number'},
    {'title':'重量kg','dataIndex':'actual_weight',},
    {'title':'长cm','dataIndex':'actual_length',},
    {'title':'宽cm','dataIndex':'actual_width',},
    {'title':'高cm','dataIndex':'actual_height',},
  ])
defineExpose({onShow})
  </script>

<style scoped>
.send-order-info .arco-list-wrapper{
  background-color: #fff;
}
 .drag-list{
    overflow-y: scroll !important;
    height: 500px;
}

.send-order-info .arco-list-item {
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 2.5;
  padding: 4px 20px;
}
</style>
  
  